<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="
    width=750,target-densitydpi=device-dpi,maximum-scale=1.0,
     user-scalable=no">
    <script type="text/javascript">
    function setWidth(e){if(/Andriod/i.test(navigator.userAgent))
    {var f,d=window.innerWidth;(d!=e)&&(f=d/e),
    document.addEventListener("DOMContentLoaded",
    function(){var a=document.getElementsByTagName
    ("body")[0];a.style.webkitTransformOrigin="left top";
    a.style.webkitTransform="scale("+f+")"},!1)}}setWidth(750);
    </script>
    <title>列表 - 乐购</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
    <div class="container">
        <header>
            <!-- 头部 -->
            <div class="header">
                <img class="logo" src="images/logo.png" alt="">
                <!-- search 搜索 -->
                <div class="search">
                    <i class="icon fl">&#xe6cf;</i>
                    <input type="text" placeholder="输入商家、分类或商圈">
                </div>
                <i class="icon saoma">&#xe604;</i>
                <i class="icon ring">&#xe6b0;</i>
            </div>
        </header>

        <section>
            <div class="menu fl">
                <ul>
                    <li class="top">优选水果</li>
                    <li>鲜果单切</li>
                    <li>水果</li>
                    <li>招牌水果</li>
                    <li>水果拼盘</li>
                    <li>果汁</li>
                    <li>水果沙拉</li>
                    <li>进口水果</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                    <li>卤味熟食</li>
                </ul>
            </div>
        </section>

        <section>
            <div class="box">
                <div class="wen fl">
                    <p>优选水果</p>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="clear"></div>
            </div>

            <div class="box">
                <div class="wen fl">
                    <p>鲜果单切</p>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="goods fl">
                    <img src="images-list/mihoutan.jpg" alt="">
                    <p class="d1"><span>精选</span>爱鲜蜂-佳沛绿奇异果</p>
                    <p class="d2">买一赠一</p>
                    <p class="d3">3粒/盒</p>
                    <p class="d4">¥16.9</p>
                    <div class="fonts">
                        <i class="no">&#xe61c;</i>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="clear"></div>
            </div>
        </section>
        
        <!-- 固定在底部用固定定位position:fixed; -->
        <footer>
            <div class="nice"></div>
        </footer>
        <nav>
            <div class="nav">
                <ul>
                    <li>
                        <a href="">
                            <i class="icon d1">&#xe61e;</i>
                            <p class="dd">首页</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d2">&#xe66e;</i>
                            <p>闪送超市</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d3">&#xe64a;</i>
                            <p>我的</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon d4">&#xe60c;</i>
                            <p>￥0元起送</p>
                        </a>
                    </li>
                </ul> 
                <div class="clear"></div>   
            </div>
        </nav>
    </div>

    <script src="js/jquery.js"></script>
    <script>
    //给左边的菜单div，动态添加高度
    var h = $('body').height(); //这个就是屏幕的高度
    var menu = h-102-124
    $('.menu').css('height', menu+'px')
    
    //所有li都加点击事件
    $('.menu ul li').click(function(){
        //.index是获取被点击的li标签的下标
        var i = $(this).index()
        // console.log(i)
        //让右边的水果列表显示 .eq是选择第几个box
        $('.box').eq(i).show();
        //.show()是显示  .hide()是隐藏
        //.fadeIn() 淡入  .fadeOut() 淡出
        //.slideDown() 下拉显示  .slideUp() 上拉显示
        // $('.box').eq(i).show().siblings('.box').hide()
        $('.box').eq(i).fadeIn(400).siblings('.box').fadeOut(100)
        //被点击的li添加class 其他的li(兄弟标签)删除class
        $(this).addClass('top').siblings().removeClass('top');
    })
        $('.menu ul li').eq(0).click(); //默认点击第一个
    </script>
</body>
</html>